<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '账户提现',
  },
}
</route>

<template>
  <view class="page" :style="{ height: sysInfoStore.sysInfo.height }">
    <view class="txfs">提现方式</view>
    <view class="sel">
      <view class="zfb">
        <view class="dui">
          <view class="gou">√</view>
        </view>
        <img class="img" src="@/static/images/zfb.png" />
        支付宝
      </view>
      <text class="red">查看余额明细</text>
    </view>
    <wd-form class="form" size="large" ref="form" :model="model">
      <wd-cell title="支付宝账号" vertical>
        <wd-input
          prop="account"
          clearable
          size="large"
          v-model="model.account"
          placeholder="请输入支付宝账号"
          :rules="[{ required: true, message: '请填写支付宝账号' }]"
        />
      </wd-cell>
      <wd-cell title="姓名" vertical>
        <wd-input
          prop="username"
          clearable
          size="large"
          v-model="model.username"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
      </wd-cell>
      <wd-cell title="提现金额" vertical>
        <wd-input
          prop="money"
          clearable
          size="large"
          type="number"
          without-input
          :min="0"
          v-model="model.money"
          placeholder="请输入提现金额"
          :rules="[{ required: true, message: '请填写提现金额' }]"
        />
      </wd-cell>

      <view class="txtip">
        <text>
          可提现金额
          <text class="red">0</text>
          元
        </text>
        <text class="red">全部提现</text>
      </view>

      <view class="footer">
        <wd-button type="primary" custom-class="custom-bg" size="large" @click="handleSubmit" block>
          立即提现
        </wd-button>
      </view>
    </wd-form>

    <view class="tip">
      <view class="t1">关于提现</view>
      <view>1.商品下单支付后48小时并且确认收货后即可领取奖励和补贴。</view>
      <view>2.提现金额单笔最低1元，支付宝单笔提现金额50000元。每日提现次数不超过3次。</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useSysInfoStore } from '@/store/sysInfo'
import { reactive } from 'vue'
const model = reactive({
  account: '',
  username: '',
  money: 0,
})
const sysInfoStore = useSysInfoStore()
function handleSubmit() {}
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  background: #f4f4f4;
  box-sizing: border-box;
  .txfs {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
}
.red {
  color: #ff2e4f;
  font-size: 36rpx;
}
.sel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .red {
    font-size: 28rpx;
  }
  .zfb {
    border: 1px solid #06b4fd;
    border-radius: 10rpx;
    font-size: 32rpx;
    background: white;
    display: inline-flex;
    align-items: center;
    padding: 20rpx 60rpx;
    justify-content: center;
    overflow: hidden;
    position: relative;
    .dui {
      position: absolute;
      top: 0;
      right: 0;

      color: white;
      // background: #06b4fd;
      width: 0;
      height: 0;
      border-top: 30px solid #007bff;
      border-left: 30px solid transparent;

      .gou {
        position: absolute;
        top: -36px;
        right: -5px;
        display: inline-flex;
        width: 30px;
        height: 30px;
        color: white;
        font-size: 16px;
        justify-content: center;
        align-items: center;
      }
    }
    .img {
      width: 30px;
      height: 30px;
    }
  }
}

.form {
  background: white;
  margin: 20rpx auto;
  padding: 20px;
  border-radius: 20rpx;
  :deep(.wd-cell__title) {
    font-size: 32rpx;
  }

  :deep() {
    .wd-cell__wrapper.is-vertical .wd-cell__right {
      margin-top: 10px;
    }
    .custom-bg {
      height: 100rpx;
      font-size: 36rpx;
      background: linear-gradient(#ff6f68, #ff2f55);
      letter-spacing: 2px;
    }
  }

  .txtip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    font-size: 32rpx;
    margin: 20rpx 0 60rpx;
  }
}

.tip {
  padding-top: 40rpx;
  font-size: 24rpx;
  color: #666;
  line-height: 1.8;
  letter-spacing: 1px;
  .t1 {
    color: #333;
    font-size: 32rpx;
  }
}
</style>
